<template>
    <div class="">

        <div class="margin_top_20">
            <div class="row_item">自媒体平台</div>
            <!-- 标签列表 -->
            <platform-list-radio @select-label="getSecondMeatilByHMIDAction"></platform-list-radio>
        </div>

        <div class="margin_top_20">
            <div class="row_item">选择行业</div>
            <!--<label-list-radio :levelListData="firstLevel"></label-list-radio>-->
            <self-media-lib-second-label-class :firstLevelId="firstLevel" @init-ok="getThirdMeatilByHMIDAction"
                                         @select-label="getThirdMeatilByHMIDAction"></self-media-lib-second-label-class>
        </div>

        <div class="margin_top_20">
            <div class="row_item">二级行业</div>
            <self-media-lib-third-label-class :secondLevelId="secondLevel" @init-ok="getMediabraryAll"
                                        @select-label="getMediabraryAll"></self-media-lib-third-label-class>
        </div>

        <div class="margin_top_20">
            <div class="input-group width_400px">
                <input type="text" class="form-control" v-model="keyWords" placeholder="本栏目搜索" v-on:keyup.enter="searchAction">
                <span class="input-group-btn">
                    <button type="button" class="btn btn-primary" @click="searchAction"><i class="fa fa-search"></i> 本栏目搜索</button>
                </span>
            </div>
            <div>
                <!-- 文章过滤 -->
                <article-list-filter @time-filter-action="timeFilterAction" @content-type-action="contentTypeAction"></article-list-filter>
            </div>
        </div>
        <!--文章列表-->
        <div class="margin_top_20">
            <Table :columns="columns1" :data="articleList" @on-sort-change="sortChangeAction"></Table>
        </div>
        <!--分页-->
        <div class="page_center">
            <Page :total="articleListCount" :current="currentPage" @on-change="pageChangeAction" show-elevator></Page>
        </div>
    </div>
</template>

<script>
    import platformListRadio from "../../components/platformListRadio.vue"
    import labelListRadio from "../../components/labelListRadio.vue"

    import articleListFilter from "../../components/articleListFilter.vue"

    import selfMediaLibSecondLabelClass from "./child/selfMediaLibSecondLabelClass.vue"
    import selfMediaLibThirdLabelClass from "./child/selfMediaLibThirdLabelClass.vue"
    // 发送ajax 请求的组件
    import getData from '../../api/getData'
    // 分页的配置信息
    import {page_config} from '../../config/config'

    var selfMediaLibraryLogic = {
        // 根据过滤条件查询自媒体素材内容
        getMediabraryContentList: function (vueObj) {
            var paramObj = {
                HMCID1: vueObj.firstLevel,
                HMCID2: vueObj.secondLevel,
                HMCID3: vueObj.thirdLevel,
//                  MCNAME: '',
                TypeId: 0,
                Date: 0,
                orderType:vueObj.orderType,
//            1 发布时间 2评论数 3 阅读量
                orderName:vueObj.orderName,
                pageSize: page_config.pagesize,
                pageIndex: vueObj.currentPage
            };
            // 添加关键字参数
            if(vueObj.keyWords != ""){
                paramObj["MCNAME"]=vueObj.keyWords;
            }
            // 时间过滤对象
            if(vueObj.dateFilterObj != null){
                paramObj["Date"]=vueObj.dateFilterObj.valueKey;
//                console.log("vueObj.dateFilterObj.valueKey ：" + vueObj.dateFilterObj.valueKey)
            }
            // 类型过滤对象
            if(vueObj.typeFilterObj != null){
                paramObj["TypeId"]=vueObj.typeFilterObj.valueKey;
//                console.log("vueObj.typeFilterObj.valueKey ：" + vueObj.typeFilterObj.valueKey)
            }

            getData.post("getMediabraryAll", paramObj).then(function (response) {
                vueObj.articleList = response.data.data;
                vueObj.articleListCount = response.data.PageCount;
            })
                .catch(function (response) {
                    console.log(response);
                });
        },

        // 收藏 或者 取消收藏  向服务器打交道
        collectAction: function( url, param, vueObj ){
            getData.post( url, {MCTID : param.HMCTID} ).then(function (response) {
                var data = response.data;
                if(data.code == 0){
                    param.ISSC = param.ISSC ? 0 : 1;
                }else{
                    vueObj.$Message.info( data.msg ? data.msg : '网络错误，请稍后重试');
                }
            }).catch(function (response) {
                console.log(response);
            });
        }
    };

    export default {
        // 组件初始化执行的方法
        mounted: function () {

        },
        data: function () {
            return {

                // 平台的数据列表
                platform: [],
                // 根据一级平台加载二级类目
                firstLevel: "",
                firstLevelValue: "",
                // 一级分类
                secondLevel: "",
                secondLevelValue: "",
                // 二级分类
                thirdLevel: "",
                thirdLevelValue: "",
                // 列表的总数据数
                articleListCount:0,
                //关键字
                keyWords:"",
                // 时间过滤对象
                dateFilterObj:null,
                // 类型过滤对象
                typeFilterObj:null,
                // 表格thead
                columns1: [
                    {
                        title: '缩略图',
                        key: 'HMCTImage',
                        render: (h, params) => {
                            return h('a', {
                                attrs: {
                                    href: params.row.HMCTURL
                                }
                            },[
                                h('img', {
                                    attrs: {
                                        src: params.row.HMCTImage,
                                        style: 'width:100%;height: auto'
                                    }
                                })
                            ]);
                        }
                    },
                    {
                        title: '标题',
                        key: 'HMCTTitle',
                        ellipsis: true,
                        render: (h, params) => {
                            return h('div', [
                                h('a', {
                                    attrs: {
                                        href: params.row.HMCTURL,
                                        target:"_blank",
                                        title:params.row.HMCTTitle
                                    },
                                }, params.row.HMCTTitle)
                            ]);
                        }
                    },
                    {
                        title: '类型',
                        key: 'TypeName'
                    },
                    {
                        title: '来源',
                        key: 'HMCTSource',
                        align: "center"
                    },
                    {
                        title: '时间',
                        key: 'RDate',
                        sortable: true
                    },
                    {
                        title: '阅读',
                        key: 'HMCTAmout',
                        sortable: true
                    },
                    {
                        title: '评论',
                        key: 'HMCTCommentNum',
                        sortable: true
                    },
                    {
                        title: '收藏',
                        key: 'ISSC',
                        render: (h, params) => {
                            return h('div', [
                                h('span', {
                                    on: {
                                        click: () => {
                                            this.markFavorite( params.row );
                                        }
                                    }
                                }, [
                                    h('Icon', {
                                        props: {
                                            type: params.row.ISSC ? 'star' : 'ios-star-outline'
                                        },
                                        style: {
                                            fontSize: '20px'
                                        }
                                    })
                                ])
                            ]);
                        },
                    }
                ],
                articleList:[],
                // 当前页面数
                currentPage:1,
                // 1降序 2升序
                orderType:1,
                // 1 发布时间 2评论数 3 阅读量
                orderName:1,
            }
        },
        methods: {
            // 获取二级标签
            "getSecondMeatilByHMIDAction": function (platformObj, index) {
                this.firstLevel = platformObj.HMCID;
            },
            // 获取三级标签
            "getThirdMeatilByHMIDAction": function (platformObj, index) {
                this.secondLevel = platformObj.HMCID;
                this.secondLevelValue = platformObj.HMCID;
            },
            // 获取三级标签
            "getMediabraryAll": function (platformObj, index) {
                this.thirdLevel = platformObj.HMCID;
                this.thirdLevelValue = platformObj.HMCID;
                selfMediaLibraryLogic.getMediabraryContentList(this);
            },

            // 点击选中的标签
            timeFilterAction: function(filterObj){
                // 时间过滤对象
                this.dateFilterObj = filterObj;
                selfMediaLibraryLogic.getMediabraryContentList(this);
            },

            // 点击选中的标签
            contentTypeAction: function(filterObj){
                // 类型过滤对象
                this.typeFilterObj = filterObj;
                selfMediaLibraryLogic.getMediabraryContentList(this);
            },

            // 标记收藏或者取消收藏
            markFavorite( param ){
                var url = param.ISSC == 1 ? 'cancelMediabraryCollection' : 'addMediabraryCollection';
                selfMediaLibraryLogic.collectAction( url, param, this);
            },

            // 分页触发的事件
            pageChangeAction:function (currentPage) {
                this.currentPage = currentPage;
                selfMediaLibraryLogic.getMediabraryContentList(this);
            },

            // 本栏目搜索
            searchAction: function () {
                this.currentPage = 1;
                selfMediaLibraryLogic.getMediabraryContentList(this);
            },

            // 升降排序
            sortChangeAction: function(sortJson){
                var order = sortJson.order;
                var key = sortJson.key;
                if(key == "RDate"){
                    this.orderName = 1;
                }
                if(key == "HMCTAmout"){
                    this.orderName = 3;
                }
                if(key == "HMCTCommentNum"){
                    this.orderName = 2;
                }
                if(order == "desc"){
                    this.orderType = 1;
                }else{
                    this.orderType = 2;
                }
                selfMediaLibraryLogic.getMediabraryContentList(this);
            }
        },
        components: {
            labelListRadio,
            selfMediaLibSecondLabelClass,
            selfMediaLibThirdLabelClass,
            articleListFilter,
            platformListRadio
        }

    }
</script>
